<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>用户注册</p>
    </header>
    
    <!-- 注册类型选择 -->
    <div class="register-type">
      <div class="type-option" :class="{active: registerType === 'user'}" @click="registerType = 'user'">
        <i class="fa fa-user"></i>
        <span>普通用户</span>
      </div>
      <div class="type-option" :class="{active: registerType === 'business'}" @click="registerType = 'business'">
        <i class="fa fa-store"></i>
        <span>商家用户</span>
      </div>
    </div>

    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">
          用户名：
        </div>
        <div class="content">
          <input 
            type="text" 
            v-model="user.username" 
            placeholder="请输入用户名"
            maxlength="100">
        </div>
      </li>
      
      <li>
        <div class="title">
          密码：
        </div>
        <div class="content">
          <input 
            type="password" 
            v-model="user.password" 
            placeholder="请输入密码"
            @input="validatePassword">
        </div>
      </li>
      
      <li>
        <div class="title">
          确认密码：
        </div>
        <div class="content">
          <input 
            type="password" 
            v-model="confirmPassword" 
            placeholder="请再次输入密码"
            @input="validatePassword">
          <p class="error-message" v-if="passwordError">{{ passwordError }}</p>
        </div>
      </li>
      
      <li>
        <div class="title">
          性别：
        </div>
        <div class="content gender-options">
          <label>
            <input type="radio" v-model="user.userSex" value="1"> 男
          </label>
          <label>
            <input type="radio" v-model="user.userSex" value="0"> 女
          </label>
        </div>
      </li>
      
      <!-- 商家专属字段 -->
      <template v-if="registerType === 'business'">
        <li>
          <div class="title">
            商家名称：
          </div>
          <div class="content">
            <input 
              type="text" 
              v-model="user.businessName" 
              placeholder="请输入商家名称"
              maxlength="100">
          </div>
        </li>
      </template>
    </ul>

    <div class="button-login">
      <button @click="register" :disabled="isRegistering">
        <i v-if="isRegistering" class="fa fa-spinner fa-spin"></i>
        {{ isRegistering ? '注册中...' : '立即注册' }}
      </button>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'Register',
  components: {
    Footer
  },
  data() {
    return {
      registerType: 'user', // 'user' 或 'business'
      user: {
        username: '',
        password: '',
        userSex: 0,
        userImg: '',
		businessName:'',
      },
      business: {
        name: '',
        phone: '',
        email: '',
        firstName: '',
        lastName: '',
        gender: '',
        photo: ''
      },
      confirmPassword: '',
      passwordError: '',
      isRegistering: false
    }
  },
  methods: {
    // 密码验证
    validatePassword() {
      if (this.user.password && this.confirmPassword && 
          this.user.password !== this.confirmPassword) {
        this.passwordError = '两次输入的密码不一致';
      } else {
        this.passwordError = '';
      }
    },
    
    // 注册方法
    async register() {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }
      
      this.isRegistering = true;
      
      try {
        let response;
        const userData = {
          username: this.user.username,
          userSex: this.user.userSex,
          userImg: this.user.userImg,
		  password:this.user.password,
          businessName:this.user.businessName
        };
        
        if (this.registerType === 'business') {
          // 调用商家注册接口
          response = await this.$axios.post(
            '/api/users/registerB',
            userData,
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
          );
        } else {
          // 调用普通用户注册接口
          response = await this.$axios.post(
            '/api/users/register',
            {
              username: this.user.username,
              password: this.user.password,
              userSex: this.user.userSex,
              userImg: this.user.userImg
            },
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
          );
        }
        
        if (response.data && response.data.success) {
          alert('注册成功！');
          this.$router.push('/login');
        } else {
          throw new Error(response.data?.message || '注册失败');
        }
      } catch (error) {
        console.error('注册失败:', error);
        this.handleRegisterError(error);
      } finally {
        this.isRegistering = false;
      }
    },
    
    // 表单验证
    validateForm() {
      if (!this.user.username) {
        alert('用户名不能为空');
        return false;
      }
      
      if (this.user.username.length < 1 || this.user.username.length > 100) {
        alert('用户名长度需在1-100个字符之间');
        return false;
      }
      
      if (!this.user.password) {
        alert('密码不能为空');
        return false;
      }
      
      if (this.user.password !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return false;
      }
      
      return true;
    },
    
    // 处理注册错误
    handleRegisterError(error) {
      let errorMessage = '注册失败，请重试';
      
      if (error.response) {
        switch (error.response.status) {
          case 400:
            errorMessage = error.response.data?.message || '请求参数错误';
            break;
          case 409:
            errorMessage = '用户名已存在';
            break;
          case 500:
            errorMessage = '服务器内部错误';
            break;
        }
      }
      
      alert(errorMessage);
    }
  }
}
</script>

<style scoped>
  /*************** 总容器 ***************/
  .wrapper {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    padding-bottom: 14vw;
  }

  /*************** header部分 ***************/
  header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*************** 注册类型选择 ***************/
  .register-type {
    display: flex;
    width: 100%;
    margin-top: 12vw;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

  .type-option {
    flex: 1;
    padding: 4vw;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
  }

  .type-option.active {
    color: #0097FF;
    border-bottom-color: #0097FF;
  }

  .type-option i {
    font-size: 6vw;
    margin-bottom: 1vw;
    display: block;
  }

  .type-option span {
    font-size: 3.8vw;
  }

  /*************** 表单部分 ***************/
  .form-box {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
  }

  .form-box li {
    box-sizing: border-box;
    padding: 4vw;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .form-box li .title {
    flex: 0 0 25vw;
    font-size: 4vw;
    color: #333;
    font-weight: 500;
  }

  .form-box li .content {
    flex: 1;
  }

  .form-box li .content input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 4vw;
    padding: 2vw 0;
  }

  .gender-options {
    display: flex;
    gap: 6vw;
  }

  .gender-options label {
    display: flex;
    align-items: center;
    font-size: 4vw;
    color: #666;
  }

  .gender-options input[type="radio"] {
    margin-right: 2vw;
    width: 4vw;
    height: 4vw;
  }

  .error-message {
    color: #ff4757;
    font-size: 3.5vw;
    margin-top: 1vw;
  }

  /*************** 注册按钮 ***************/
  .button-login {
    width: 100%;
    padding: 6vw 4vw;
    box-sizing: border-box;
  }

  .button-login button {
    width: 100%;
    height: 12vw;
    border: none;
    outline: none;
    border-radius: 6px;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
  }

  .button-login button:hover:not(:disabled) {
    background-color: #0085e0;
  }

  .button-login button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }

  /*************** 响应式设计 ***************/
  @media (min-width: 768px) {
    header {
      height: 60px;
      font-size: 20px;
    }
    
    .register-type {
      margin-top: 60px;
    }
    
    .type-option {
      padding: 20px;
    }
    
    .type-option i {
      font-size: 24px;
    }
    
    .type-option span {
      font-size: 16px;
    }
    
    .form-box li {
      padding: 15px 20px;
    }
    
    .form-box li .title {
      flex: 0 0 120px;
      font-size: 16px;
    }
    
    .form-box li .content input {
      font-size: 16px;
      padding: 10px 0;
    }
    
    .gender-options {
      gap: 30px;
    }
    
    .gender-options label {
      font-size: 16px;
    }
    
    .gender-options input[type="radio"] {
      width: 16px;
      height: 16px;
    }
    
    .error-message {
      font-size: 14px;
    }
    
    .button-login {
      padding: 20px;
    }
    
    .button-login button {
      height: 50px;
      font-size: 18px;
      max-width: 400px;
      margin: 0 auto;
      display: block;
    }
  }
</style>